// 编写插件方式的懒加载指令

// 1. vue3全局指令  Vue.directive -> createApp()->app.directive()
// 2. vue3全局指令  自定义钩子函数中命名规则上和组件的生命周期保持一致 inserted -> mounted

// 1. vue3插件  Vue.use() -> createApp()->app.use(plugin)

// 引入监听是否进入视口
import { useIntersectionObserver } from '@vueuse/core'

const plugin = {
  install (app) {
    // 编写插件的逻辑 【全局指令】
    // app.use()插件注册的时候 会自动调用插件的install方法并且把当前的应用实例对象app传入
    console.log(app)
    app.directive('lazy-img', {
      // 依旧是指令绑定的元素对象挂载完毕时自动执行
      // el：图片dom元素 binding.value：图片真实的url
      mounted (el, binding) {
        console.log(el, binding)
        // 图片懒加载核心逻辑：判断图片是否进入到视口区域如果进来才发送图片请求
        // 技术解决：1. 如何判断图片进入视口  2. 如何发送图片请求 [操作图片的src=url]
        // vueUse插件提供了一个专门用来监控dom是否进入视口区域！！
        const { stop } = useIntersectionObserver(
          // 监听目标元素
          el,
          ([{ isIntersecting }], observerElement) => {
            if (isIntersecting) {
              // 满足条件把图片的url交给图片的src属性 浏览器会自动发送图片请求
              el.src = binding.value
              // 对当前的el停止监听
              stop()
            }
          },
          // 刚进入视口区域就立刻执行回调 0 - 1
          { threshold: 0 }
        )
      }
    })
  }
}

export default plugin
